<template>
  <div id="mainpie" style="width: 100%; height: 100%"></div>
</template>
<script setup name="EcharsPie">
import * as echarts from 'echarts'
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const props = defineProps({
  pieObj: {
    type: Object,
    require: true
  }
})
const color = [
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#b2c095',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc',
  '#5470c6',
  '#5c22e4',
  '#cadb2c',
  '#2cb2db',
  '#5c38df',
  '#df9138',
  '#ff00ff',
  '#38dfdf',
  '#2270e4',
  '#30c92b',
  '#9438df',
  '#4082b9',
  '#40b950',
  '#eeeb59',
  '#ee9c59',
  '#f53a21',
  '#27eb27',
  '#217df5',
  '#f5214f',
  '#5a40b9',
  '#27ebeb',
  '#b221f5',
  '#38df62',
  '#b2df38',
  '#c7162e',
  '#24c716'
]
let mainpie = null
const data = reactive({
  // 圆饼图配置信息
  option: {},
  // echarts绑定dom
  // mainpie: null,
  // echarts所需数据
  echartsData: [],
  // 标题
  title: ''
})
let { option, echartsData, title } = toRefs(data)
watch(
  () => props.pieObj,
  (newVal, oldVal) => {
    title.value = props.pieObj?.title
    echartsData.value = props.pieObj?.data
    proxy.$nextTick(() => {
      echartsDraw()
    })
  },
  {
    deep: true,
    immediate: true
  }
)
function echartsDraw() {
  if (mainpie != null && mainpie != '' && mainpie != undefined) {
    mainpie.dispose() // 销毁
  }
  mainpie = echarts.init(document.getElementById('mainpie'))
  option.value = {}
  option.value = {
    color: color,
    title: {
      text: title.value,
      subtext: '',
      show: false,
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '50%',
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}:{d}%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        bottom: 30,
        left: 10,
        right: 10,
        data: echartsData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  // console.log({ ...option.value, ...props.pieObj?.option })
  mainpie.setOption({ ...option.value, ...props.pieObj?.option })
}
</script>
<style lang="scss" scoped></style>

<style scoped></style>
